import React from 'react';
import styles from './itemTitle.less';

export default (props) => {
  let { type = 0, title, icon = 'icon-changpian2', nav } = props;
  let typeCls = `type-${type}`;
  let rightContnet = null;

  if (props.children) {
    rightContnet = <div className={`click`}>{props.children}</div>;
  }

  if (nav) {
    nav = (
      <ul style={{ display: 'flex', marginLeft: '20px' }}>
        {nav.map((v, i) => {
          return (
            <li key={i}>
              <a href="" style={{ padding: '10px', color: 'black' }}>
                {v.name}
              </a>
            </li>
          );
        })}
      </ul>
    );
  }

  return (
    <div className={`${styles['item-tit']} ${styles[typeCls]}`}>
      <div>
        <div className={`${styles['left-ui']}`}>
          <i className={`iconfont ${icon}`}></i>
          <div className={`${styles['title-text']} text-row-1`}>{title}</div>
          {nav}
        </div>

        {rightContnet}
      </div>
    </div>
  );
};

// export default ItemTitle;
